import React,{Component} from 'react';
// var echarts = require('echarts');
import echarts from 'echarts';
class Echarts extends Component {
    constructor(props){
        super(props)
        this.state={
            visible:false
        }
    }
    componentDidMount(){
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        myChart.setOption({
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
        var myChartTwo = echarts.init(document.getElementById('mainTwo'));
        myChartTwo.setOption({
            title: {
                text: '某楼盘销售情况',
                subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                show: true,
                data:['预购','成交']
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: {show: true, type: ['stack', 'tiled']},
                    saveAsImage: {show: true}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [{
                    value: '1',
                        textStyle: {
                            fontSize: 18,
                            color: 'black'
                        }
                    },
                    {
                        value: '2',
                        textStyle: {
                            fontSize: 18,
                            color: 'black'
                        }
                    },
                    {
                        value: '3',
                        textStyle: {
                            fontSize: 18,
                            color: 'black'
                        }
                    },
                    {
                        value: '4',
                        // 突出周一
                        textStyle: {
                            fontSize: 20,
                            color: 'black'
                        }
                    },
                    {
                        value: '5',
                        // 突出周一
                        textStyle: {
                            fontSize: 20,
                            color: 'black'
                        }
                    },
                    {
                        value: '6',
                        // 突出周一
                        textStyle: {
                            fontSize: 20,
                            color: 'red'
                        }
                    },
                    {
                        value: '7',
                        // 突出周一
                        textStyle: {
                            fontSize: 20,
                            color: 'black'
                        }
                    },
                    {
                        value: '8',
                        // 突出周一
                        textStyle: {
                            fontSize: 20,
                            color: 'black'
                        }
                    },
                    {
                        value: '9',
                        // 突出周一
                        textStyle: {
                            fontSize: 20,
                            color: 'black'
                        }
                    },
                    {
                        value: '10',
                        // 突出周一
                        textStyle: {
                            fontSize: 20,
                            color: 'black'
                        }
                    },
                    {
                        value: '11',
                        // 突出周一
                        textStyle: {
                            fontSize: 20,
                            color: 'black'
                        }
                    },
                    {
                        value: '12',
                        // 突出周一
                        textStyle: {
                            fontSize: 20,
                            color: 'black'
                        }
                    }
                    
                ]
            },
            yAxis: {
                type: 'value',
            },
            series: [{
                name: '成交',
                type: 'line',
                smooth: true,
                data: [1910, 1712, 1621, 1454, 1260, 830, 710,500,418,316,210,20]
            },
            {
                name: '预购',
                type: 'line',
                smooth: true,
                data: [1912, 1710, 1612, 1424, 1240, 810,700,890,1100,1406,1620,1820]
            }]
        })
    }
    render() {
        return (
            <div>
                <div id="main" style={{width: 600,height:400}}></div>
                <div id="mainTwo" style={{width: 600,height:400}}></div>
            </div>
        );
    }
}
export default Echarts;